Animated Logo

Introduction

Hello! Welcome to my first ever blog post, I’m so glad you’re here! As I continue to learn new things and expand my coding skill set, I hope to document my journey, and maybe even earn a few laughs, through my blog. But first and foremost, this blog post is all about one of my favorite elements of this site: my logo.

Inspiration

I would like to start by giving credit to Ella Kaye’s blog post detailing how she animated her Quarto website logo. This was the main inspiration behind my efforts to animate my logo and her source code was extremely helpful along the way.

Now working off Ella Kaye’s source code, I quickly realized my logo was less straightforward. I originally created my logo in Adobe Express and uploaded it as a PNG file into my website’s navbar.

This would have been good enough for most, but alas, as coders we are always looking for our next challenge to solve.

Starting Off

From Ella’s code I

website:
  title: "Shelby Level"
  navbar:
    title: "<span class='first-name' >SHELBY</span><span class='icon-line' ></span><span class ='icon-line2'></span> <span class='last-name' >LE</span><span class='v' >v</span> <span class='last-name2' >EL</span>"